<template>
  <el-card>
    <el-button
      @click="$router.push('/goods/add')"
      type="primary"
      icon="el-icon-circle-plus-outline"
    >添加</el-button>
    <el-divider />
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类"></el-table-column>
      <el-table-column prop="secondcatename" label="二级分类"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="100"></el-table-column>
      <el-table-column prop="img" label="商品图片" width="100">
        <template v-slot="scope">
          <el-image :src="$imgBaseUrl+scope.row.img" :style="{height:'80px'}"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="销售价格"></el-table-column>
      <el-table-column prop="market_price" label="市场价格"></el-table-column>
      <el-table-column prop="isnew" label="是否新品">
        <template v-slot="scope">
          <el-tooltip :content="scope.row.isnew==1?'是':'否'" placement="top">
            <el-switch
              @change="updatStatus(scope.row,'isnew')"
              v-model="scope.row.isnew"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖">
        <template v-slot="scope">
          <el-tooltip :content="scope.row.ishot==1?'是':'否'" placement="top">
            <el-switch
              @change="updatStatus(scope.row,'ishot')"
              v-model="scope.row.ishot"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
          <el-tag type="error" v-else>下架</el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template v-slot="scope">
          <el-button
            type="primary"
            size="mini"
            circle
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            circle
            icon="el-icon-delete"
            @click="edit(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      @current-change="pageChange"
    ></el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 5,
      total: 0
    };
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      const res = await this.$http.get("/api/goodslist", {
        params: { page: this.page, size: this.size }
      });
      console.log(res);
      if (res.code == 200) {
        this.list = res.list;
      }
    },
    // 获取商品总条数
    async getTotal() {
      const res = await this.$http.get("/api/goodscount");
      this.total = res.list[0].total;
    },
    // 页码更新回调函数
    pageChange(page) {
      this.page = page;
      console.log(page);
      this.getGoodsList();
    },
    // 更新商品属性
    async updatStatus(row, attr) {
      const postData = { id: row.id };
      postData[attr] = row[attr];
      // 必须使用FormData的方式进行表单提交
      const fd = new FormData();
      for (let key in postData) {
        fd.append(key, postData[key]);
      }
      const res = await this.$http.post("/api/goodsedit", fd);
      if (res.code == 200) {
        this.$success("更新成功");
      } else {
        this.$error("更新失败");
      }
    },
    edit(id) {
      this.$router.push(`/goods/${id}`);
    }
  },
  created() {
    this.getGoodsList();
    this.getTotal();
  }
};
</script>

<style>
</style>